﻿@model string
@using Nop.Admin.Models.Customers
@{
    Layout = null;
}
<link href="/Administration/Content/zTree/css/demo.css" rel="stylesheet" />
<link href="/Administration/Content/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="/Administration/Content/zTree/js/jquery.ztree.core.js"></script>
<script src="/Administration/Content/zTree/js/jquery.ztree.excheck.js"></script>
@Html.HiddenFor(model => model)
<div class="input-group">
    <input id="checkbox_menu" type="text" readonly value="" class="form-control text-box single-line" />
    <div class="input-group-btn">
        <button type="button" name="menuBtn" class="btn btn-info" onclick="showMenu();">
            选择
        </button>
    </div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index: 1000;">
    <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
</div>
<script>
    var setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck
        }
    };

    var zNodes = [
        @foreach (var item in (List<CustomerSelectModel>)ViewData["SelectList"])
    {
        <text>
            { id: "@item.id", pId: "@item.pId", name: "@Html.Raw(item.name)", open: false,checked:"@item.checke", 'class': 'curSelectedNode', 'type': '@item.type' },
        </text>
    }
    ];

    var clearFlag = false,v='';
    function onCheck(e, treeId, treeNode) {
        count();
        if (clearFlag) {
            clearCheckedOldNodes();
        }
    }
    function clearCheckedOldNodes() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = zTree.getChangeCheckedNodes();
        for (var i = 0, l = nodes.length; i < l; i++) {
            nodes[i].checkedOld = nodes[i].checked;
        }
    }
    function count() {
        v = '';
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true);
        //checkCount = zTree.getCheckedNodes(true).length,
        //nocheckCount = zTree.getCheckedNodes(false).length,
        //changeCount = zTree.getChangeCheckedNodes().length;
        //$("#checkCount").text(checkCount);
        //$("#nocheckCount").text(nocheckCount);
        //$("#changeCount").text(changeCount);
        
        var myArray = new Array();
        if (nodes.length === 0) {
            $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val(myArray);
        }
        else {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].type == 'user') {
                    v += nodes[i].name + ",";
                    myArray.push(nodes[i].id);
                }
            }
        }
        $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val(myArray);
        console.log($("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val());
        var cityObj = $("#checkbox_menu");
        cityObj.attr("value", v);

    }
    function createTree() {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        count();
        clearFlag = $("#last").attr("checked");
    }
    function showMenu() {
        var cityObj = $("#checkbox_menu");
        var cityOffset = $("#checkbox_menu").offsetParent();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("#treeDemo").css({ width: cityObj.outerWidth() + "px" });
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    $(document).ready(function () {
        createTree();
        $("#init").bind("change", createTree);
        $("#last").bind("change", createTree);
    });
</script>